<template>
    <van-tabbar class="tarbbar" v-model="active" @change="onChange" inactive-color="#b8b8b8" active-color="#fa162f">
        <van-tabbar-item v-for="item in navbar" :key="item.name" :name="item.name">
            <template #icon="props">
                <img :src="props.active ? item.icon.active : item.icon.inactive" />
            </template>
            {{ item.title }}
        </van-tabbar-item>
    </van-tabbar>
</template>
<script>
import eventBus from '@/common/event-bus';
import tabbarIcon from "@/common/tabbarIcon"
import { Tabbar, TabbarItem } from 'vant';
export default {
    name: "NavigationBar",
    components: {
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem,
    },
    data() {
        return {
            active: "home",
            navbar: [{
                name: "home",
                title: "首页",
                icon: {
                    active: tabbarIcon.homeActive,
                    inactive: tabbarIcon.homeInactive,
                }
            }, {
                name: "classify",
                title: "分类",
                icon: {
                    active: tabbarIcon.classifyActive,
                    inactive: tabbarIcon.classifyInactive,
                }
            }, {
                name: "service",
                title: "客服",
                icon: {
                    active: tabbarIcon.serviceActive,
                    inactive: tabbarIcon.serviceInactive,
                }
            }, {
                name: "mine",
                title: "我的",
                icon: {
                    active: tabbarIcon.mineActive,
                    inactive: tabbarIcon.mineInactive,
                }
            }],
        }
    },
    methods: {
        onChange(name) {
            this.$router.push({ name });
        }
    },
    mounted() {
        eventBus.$on("correctPath", (path) => {
            path = path.substr(1);
            this.active = path;
        })
    }
}
</script>
<style lang="scss">
.tarbbar {
    z-index: 9999;
}
</style>